<!--                <template v-if="renderC.state.refresh">-->
<!--                    <render-layout :map="renderC.state.currentLayoutMap"-->
<!--                                   :id="renderC.state.rootId"-->
<!--                                   :handle-next="renderC.handleNext"-->
<!--                                   :handle-def-map="handleDefMap"-->
<!--                                   :page="page">-->
<!--                        {% endverbatim %}-->
<!--                        {{CONFIG.layoutSlots}}-->
<!--                        {% verbatim %}-->
<!--                    </render-layout>-->
<!--                </template>-->

<template id="apptpl">
    <style>
        .prop-selected {
            border: 1px solid;
            background: aliceblue;
        }

        [current-to-move] {
            /*background-color: #0d84ff;*/
            border: 1px dashed #0d84ff;
            /*border-bottom: 2px solid;*/
            /*border-bottom-color: #0d84ff;*/
            pointer-events: none;
            position: relative;
            background-color: #eeeeee;
            opacity: .5;
        }
    </style>

    <template>
        <div class="z-page">
            <template v-if="page.inited">
                <template v-if="renderC.state.refresh && comReady">
                    {% verbatim %}
                    <load_page__render_xml__def_render_tag
                            :page="page"
                            :handle-def-map="handleDefMap">
                    {% endverbatim %}
                        {{CONFIG.layoutSlots}}
                    {% verbatim %}
                    </load_page__render_xml__def_render_tag>
                    {% endverbatim %}
                </template>
            </template>
            <div id="debug"></div>
        </div>
    </template>

    <components>{
        "imports": ["/src/views/about/components/LayRow.vue"]
        }</components>

    <script>
        window.Z_PAGE_VERSION = '1.0.0'


        const cm_field_html = ZY.getHereDoc(function() { /*
        <div class="z-page__render_xml"
        z-page__render_xml="load_page__render_xml__def_render_tag"
        >
        {{C_XML}}
        </div>
        */ });
        // console.log(cm_field_html)


        CustomVueComponent.register({
          name: 'load_page__render_xml__def_render_tag',
          template:  cm_field_html,
          props: {
            handleDefMap: {
              type: Function,
              default: null
            },
            page: null,
            slotContent: null,
          },
          data() {
            return {
              innerSlots: this.slotContent ? this.slotContent : this.$slots,
            }
          },
          methods: {
            getObj(...args) {
              return ZY.lodash.get(...args)
            },
            getDef(partName = '') {
              let r = this.handleDefMap(partName)
              // console.log(partName, r)
              return ZY.JSON5.stringify(r)
            }
          }
        })

        export default {
            mixins: [
              buildPageCommonMixin()
            ],
            setup() {
                const { reactive } = global.Vue;
                let stepMap = reactive({

                })

                const 循环 = ZY.lodash.each;
                const 获取 = ZY.lodash.get;
                const 默认值 = ZY.lodash.defaultTo;

                class 工具 {
                    static 设置函数(events = []) {
                        let obj = {}
                        events.forEach(event => {
                            obj[event.name] = new ZY.AsyncFunction('e', event.code)
                        })
                        page.setEventHandler(obj)
                    }

                    /**
                     * 初始化
                     * @param eventModel
                     */
                    static 初始化(eventModel = {events: [], forms: []}) {
                        // console.log(eventModel)
                        this.设置函数(eventModel.events);
                        let forms = eventModel.forms;

                        循环(forms, form=> {
                            let {value, name} = form
                            let obj = ZY.JSON5.parse(value)
                            let formDef = buildFormDep(obj, name, {
                                src: 'comformscr2.twig'
                            });
                            setDefMap(formDef, name)
                        })
                    }

                    static 打开弹窗(refName = '') {
                        if (refName) {
                            let context = page.modalManRef.find(refName)

                            // console.log('sdsdsdsdsdsds', context)
                            if (context && context.toggle) {
                                context.toggle(true)
                            }
                        }
                    }

                    static 设置步骤(defMap = {}){
                        // let defMap = {
                        //   test: 'process-step1'
                        // }
                        // console.log('设置步骤', defMap)
                        for (let [key, value] of Object.entries(defMap)) {
                            stepMap[key] = defMap[key]
                        }
                    }
                }
                globalThis.工具 = 工具
                globalThis.T = 工具

                let renderC = useRenderControl()
                {{ CONFIG.pageProperties }}
                {{ CONFIG.beforeScript }}

                let computed = {}
                let page = useControl({properties, computed}, {
                    onInited
                })
                page = extendControl2Page(page)
                page = useAppPageControl(page)
                let { EVENT_NAMES } = extendCommonArrEventHandler(page)

                useGlobalEasy(page)

                function setDefMap(obj, name = obj.name) {
                    page.defMap.set(name, obj)
                }

                function handleDefMap(partName) {
                    let is = stepMap[partName]
                    // console.log(partName)
                    if (page.defMap.has(is)) {
                        return page.defMap.get(is)
                    }
                    return '{}'
                }

                // console.log(EVENT_NAMES)
                let callEvent = page.callEvent

                async function onInited({storeControl}) {
                    renderC.detectLayout()
                    renderC.detectEvent((events, PAGE_CONTEXT = {}) => {
                        const CURRENT_DATA = PAGE_CONTEXT.currentData
                        const IS_FIRST_RENDER = PAGE_CONTEXT.isFirst
                        {{ CONFIG.onInited }}
                        // console.log('onInited', CURRENT_DATA)
                    })
                }

                page.stepMap = stepMap

                function getObj(...args) {
                  return ZY.lodash.get(...args)
                }

                function getDef(partName = '') {
                  let r = handleDefMap(partName)
                  console.log(partName, r)
                  return ZY.JSON5.stringify(r)
                }

                return {
                    EVENT_NAMES,
                    getObj,
                    getDef,
                    stepMap,
                    callEvent,
                    handleDefMap,
                    page,
                    renderC
                }
            }
        }
    </script>
</template>

